<script setup lang="ts">
import type { MenuVo, RouteMenu } from '@/type/Menu'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const props = defineProps<{ menu: RouteMenu }>()
const children = ref<RouteMenu[]>()
const hasNfChild = ref<boolean>(false)
const content = ref<RouteMenu>(props.menu)
onMounted(() => {
  children.value = props.menu.children.filter((it: RouteMenu) => it.menuType !== 'F' && it.visible === 0)
  hasNfChild.value = children.value.length !== 0
})

function doRoute(path: string | undefined) {
  // 跳转
  if (path) {
    router.push(path)
  }
}
</script>

<template>
  <el-sub-menu v-if="hasNfChild" :index="content.menuId">
    <template #title>
      <el-icon>
        <component :is="content.icon === '#' ? 'MagicStick' : content.icon" />
      </el-icon>
      <span>{{ content.menuName }}</span>
    </template>
    <template v-for="item in children"  :key="item.menuId">
      <s-menu v-if="item.visible === 0"  :menu="item" />
    </template>
  </el-sub-menu>
  <el-menu-item @click="doRoute(content.path)" v-else :index="content.menuId">
    <el-icon>
      <component :is="content.icon === '#' ? 'MagicStick' : content.icon"/>
    </el-icon>
    <span>{{ content.menuName }}</span>
  </el-menu-item>
</template>

<style scoped>

</style>